<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height:100%;
            width:100%;
            margin:0;

        }
        .upPage{
            width:100%;
            display:flex;
            height:80%;
            align-items: center;
           
        }
         .leftPage{
            font-size:28px;
            margin:100px;
            font-family:"黑体";
            text-align:center;

            width:35%;
            height:80%;
            .png{   
                margin:30px;
            }
        }
        .rightPage{
            font-size:24px;
            margin:100px;
            font-family:"黑体";
            line-height: 1.5;
            text-align: center;

            width:60%;
            height:80%;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            
        }
        .form_item {
            font-size: 14px;
            margin-bottom: 15px; 
            border: 1px solid darkgray; 
            border-radius: 14px; 
            width:60%;
            overflow: hidden; 
            text-align: left;
            
        }
        .divider {
            height: 0.5px;
            background-color: darkgray; 
            margin: 0;
}
        .einput{
            border:none;
            width:55%;
            height:40px;
            font-size:14px;
            margin:5px;
        }
        .ebutton{
            width:29%;
            height:40px;
            font-size:16px;
            background-color: white;
            border-color:darkgray;
            border-width:1px;
            border-radius: 14px;
        }
        .otherLogin{
            font-size: 15px;
            color:darkgrey;

            display: flex;
            flex-direction: column;
        }
        .way{
            margin: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .ways{
            display: flex;
            justify-content: center;
            align-items: center;
        }
            
        .eimg{
            width: 36px; 
            height: 36px; 
            margin-right: 8px;
            background-size: cover;
            background-position: center;
        }
        .downPage{
            width:100%;
            height: 20%;
            text-align: center;
            color:darkgray;
            display: flex;
            justify-content: space-between;

        }
        .dimg{
            height : 100%;
            width:auto;
        }
        .midx{
            width: 0.5px;
            height:60%;
            background-color: darkgray; 
            margin: 0;

        }
        .espan{
            font-family: "宋体";
        }
        
    </style>
</head>
<body>
    <div class = "upPage">
        <div class = "leftPage">
        扫描二维码登录
            <div class = "png">
                <img src="./erwei.png" style = "border: 1px solid darkgray; border-radius: 14px; padding:10px ; width:70%">
            </div>

        请使用<a href = "https://www.bilibili.com/" style = "text-decoration: none; color :dodgerblue">哔哩哔哩客户端</a><br>扫码登录或扫码下载APP
        </div>
        
        <div class = "midx"></div>  
        <div class = "rightPage">
            密码登录  |  短信登录
            <br>
            <br>
            <form  class="form_item">
                <div>
                    <label style = "padding-left:15px;">账号</label>   
                    <input placeholder="请输入账号" type="text" class = "einput">
                </div>
                <div class = "divider"></div>
                <div>
                    <label style = "padding-left:15px;">密码</label>  
                    <input placeholder="请输入密码" type="text" class = "einput">
                    <span class = "espan">忘记密码?</span>
                </div>
            </form>
            <br>
            <div style = "width: 100%">
                <button class = "ebutton">注册</button>
                <button class = "ebutton">登录</button>
            </div>
            
            <br>
            <br>
            <div class = "otherLogin">
                其他方式登录
                <br>
                <br>
                <div class = "ways">
                    <div class = "way">
                        <img src="./wechat.png" class = "eimg" >
                        <span>微信登录</span>   
                    </div>
                    <div class = "way">
                        <img src="./wobo.png" class = "eimg">
                        <span>微博登录</span>   
                    </div>
                    <div class = "way">
                        <img src="./qq.png" class = "eimg"> 
                        <span>QQ登录</span>   
                    </div>
                </div>
                
            </div>
            <img src="./cha.svg" style = "position: absolute;right:100px;top:45px;">
            
        </div>
    </div>
    <div class = "downPage">
        <img src="./left.png" class = "dimg">
        未注册过哔哩哔哩的手机号，我们将自动帮你注册账号登录或完成注册即代表你同意用户协议和隐私政策
        <img src="./right.png" class = "dimg">
    </div>
    
</body>
</html>